<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <style type="text/css">
        .d1{
            width: 300px;
            height: 300px;
            border: 1px solid skyblue;
        }
        
        </style>

    </head>
    <body>
        <button>点击发送请求</button>
        <div class="d1"></div>
        <script type="text/javascript">
            const btn = document.getElementsByTagName("button")[0];
            const d1 = document.querySelector(".d1");

            btn.onclick = function(){
                const xhr = new XMLHttpRequest();

                xhr.open("GET","http://127.0.0.1:8000/server?username=wt&password=123456");

                xhr.send();

                xhr.onreadystatechange = function(){
                    if(xhr.readyState === 4){
                        if(xhr.status>= 200 && xhr.status < 300){
                            d1.innerHTML = xhr.response;

                           /*  console.log(xhr.status);
                            console.log(xhr.statusText);
                            console.log(xhr.getAllResponseHeaders());
                            console.log(xhr.response); */
                        };
                    };

                };


            }
        
        
        
        </script>
    </body>
</html>